<script setup>
	import myTabbar from '../../component/myTabbar/index.vue'
	import {onMounted, ref, watch} from 'vue'
	const selectTab = ref(0);
	
	const activities = ref()

	const schoolActivities = ref()
	
	
	onMounted(()=>{
		uni.request({
			url:  '/data/activities.json',
			success(res) {
				activities.value = res.data.filter((item)=>{return item.activityType == '招宣活动'})
				schoolActivities.value = res.data.filter((item)=>{return item.activityType == '母校行'})
			}
		})
	})
	
	
	const searchContent = ref('');
	
	function onKeyInput(event){
		 searchContent.value = event.detail.value
		 console.log(event.detail.value);
	}
	
	function handleActivity(item){
		
			uni.navigateTo({
				url:`/pages/activities/component/activitiesInfor?activityId=${item.activityId}`, //建议这么写
			})
	}
	
	const myTab = ref();
	
	function handleSchoolActivity(item){

		uni.navigateTo({
			url:`/pages/activities/component/shoolactivity?activityId=${item.activityId}`, //建议这么写
		})
	}
	
	
</script>


<template>
	<view style="width: 100%;height: 448rpx" >
	  <image style="width: 100%;height: 448rpx;position: absolute;z-index: 0;" src="../../static/bg@2x.png"></image>
		<view style="width: 100%;height: 108rpx;"></view>
		<uni-row style="height: 50rpx;">
			<uni-col :span="6" :offset="9">
				<view style="display: flex;justify-content: center;">
					<text class="f6">招生宣传</text>
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 62rpx;width: 100%;"></view>
		
		
		<uni-row style="height: 80rpx;">
			<uni-col :span="20" :offset="2">
				<view style="height: 80rpx;background: #FFFFFF;border-radius: 40rpx;">
				
					<uni-row>
						<uni-col :span="1" :offset="1">
							<image src="../../static/搜索.png" style="height: 40rpx;width: 40rpx;position: relative;top: 20rpx;"></image>
						</uni-col>
						
						<uni-col :span="13" :offset="1">
							<view style="width: 100%;height: 16rpx;"></view>
							<input  @input="onKeyInput"  style="height: 34rpx;" placeholder="请输入活动名称模糊查询"  placeholder-style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 28rpx;color: #707070;line-height: 34rpx;"/>
						</uni-col>
						
					</uni-row>
				
					
				
				</view>
			</uni-col>
		</uni-row>
		
		
		
	</view>
	<view style="height: 1222rpx;width: 100%;border: 2rpx solid #F1F4FC;background: #F1F4FC;padding-top: 34rpx;border-radius: 24rpx;position: relative;top: -38rpx;">
		
		
		<view style="width: 100%;height: 44rpx;display: flex;">
			
			<view style="width: 32rpx;height: 100%;"></view>
			
			<view style="width: 128rpx;height: 44rpx;">
				<view @click="selectTab = 0">
					<text :class="[selectTab == 0 ? 'f1-active' : 'f1']">招宣活动</text>
					<view :class="[selectTab == 0 ? 'hr' : '']"></view>
				</view>	
			</view>
				
				<view style="width: 48rpx;height: 100%;"></view>
			
			<view style="width: 96rpx;height: 44rpx;">
				<view @click="selectTab = 1">
					<text :class="[selectTab == 1 ? 'f1-active' : 'f1']">母校行</text>
					<view  :class="[selectTab == 1 ? 'hr2' : '']"></view>
				</view>
			</view>
				
		</view>
		
		<view style="height: 36rpx;width: 100%;"></view>
		
		<template v-for="(item,index) in selectTab == 0 ? activities?.filter((item)=>{if(item.title.includes(searchContent)){return item}}) : schoolActivities?.filter((item)=>{if(item.title.includes(searchContent)){return item}})" :key="index">
			<uni-row >
			<uni-col :span="22" :offset="1" >
				<view  :class="[selectTab == 0? 'card1':'card2']" style="padding-top: 32rpx;" @click="selectTab == 0 ? handleActivity(item) : handleSchoolActivity(item)">
					
					<uni-row >
						
						<uni-col :span="17" :offset="1" >
							<view style="display: flex;">
								<view v-if="selectTab == 1" style="display: flex;">
								<view style="height: 48rpx;width: 48rpx;">
									<image src="" style="position: relative; top: -4rpx; height: 48rpx;width: 48rpx;border-radius: 100%;border: 1px solid black;"></image>
								</view>
							
									<view style="height: 100%;width: 16rpx;"></view>
								</view>
							
							
							
								<view style="height: 44rpx;">
									<text class="f2">{{item.title}}</text>
								</view>
							</view>
							
							
						</uni-col>
						
						<uni-col :span="5" >
							
							<view v-if="item.status" style="height: 44rpx;display: flex;justify-content: end;">
								<image style="width: 16rpx;height: 16rpx;position: relative; top: 18rpx;right: 6rpx;" src="../../static/点.png"></image>
								<text class="f3" style="line-height: 44rpx;position: relative;top: 2rpx;">开放报名中</text>
							</view>
							
						</uni-col>
						
					</uni-row>
						
						<view style="height: 12rpx;width: 100%;"></view>
						
					<uni-row :class="[selectTab == 0?'c1':'c2']">
						<uni-col :span="16" :offset="1">
							<view>
								<text class="f4">计划开始日期：{{item.beiginDate}}</text>
							</view>
							<view>
								<text class="f4">计划结束日期：{{item.endDate}}</text>
							</view>
							<view>
								<text class="f4">{{selectTab == 0 ? '活动区域：': '行政区域地址：'}}{{item.area}}</text>
							</view>
							<view>
								<text class="f4" v-if="selectTab == 0">活动牵头宣传组：{{item.group}}</text>
							</view>
						</uni-col>
					</uni-row>
						
						<view style="width: 100%;height: 28rpx;"></view>
						
					<uni-row>
							<uni-col :span="22" :offset="1">
								<view style="opacity: 0.24;border-top: 2rpx solid #979797;">
									
								</view>
							</uni-col>
						</uni-row>
						
						<view style="height: 26rpx;width: 100%;"></view>
						
						<uni-row  style="height: 64rpx;">
							<uni-col :span="8" :offset="2">
								<view style="height: 64rpx;position: relative;top: -7rpx;">
										<template v-for="(avatar,innerIndex) in item.avatarList" :key="innerIndex">
											<image  :src="avatar" style="width: 64rpx;height: 64rpx;border: 2rpx solid black;border-radius: 100%;margin-left: -26rpx;"></image>
										</template>
								</view>
								
							</uni-col>
							<uni-col :span="13" :offset="1">
								<view style="width: 100%;display: flex;justify-content: end;align-items: center;position: relative;left: -12rpx;top:5rpx">
									<text class="f5" style="line-height: 40rpx;">{{item.memberNum}}人已经参与活动，赶紧报名吧！</text>
								</view>
								
							</uni-col>
							
						</uni-row>
						
						
				</view>
			</uni-col>
		</uni-row>
		<view style="width: 100%;height: 24rpx;"></view>
		</template>

		
		

		
	</view>
	<myTabbar :current-page="0"  ref='myTab'></myTabbar>
</template>


<style>

.c1{
	height: 160rpx;
}

.c2{
	height: 120rpx;
}

.f1-active{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
}

.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 32rpx;
	color: #5E5E5E;
	letter-spacing: 0;
}

.hr{
	width: 122rpx;
	height: 8rpx;
	background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
}

.hr2{
	width: 84rpx;
	height: 8rpx;
	background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
}

.card1{
	height: 348rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.card2{
	height: 308rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
}

.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f4{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f6{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 36rpx;
	color: #FFFFFF;
}

</style>
